<template>
  <!-- <view class="charts-box"> -->
    <qiun-data-charts type="ring" canvasId="finance_b" :canvas2d="true" :resshow="false"
              :opts="opt"
              :chartData="expendDetail" />
  <!-- </view> -->
</template>
<script setup>
import {ref, computed} from "vue"
const props = defineProps({
	title: String, 
	data: Array,
	});
const opt = ref({
	enableMarkLine: false,
	dataLabel:false,
	padding:[15,0,4,0],
	color: ['#2E67D6', '#17B6A7', '#63A61F', '#E0BA1C', '#E18054', '#DB4052'],
	legend:{
		show: false,
		top: 10,
		position: 'right',
		itemGap: 5,
	},
	title: {
		name: ''
	},
	subtitle: {
		name: props.title,fontSize:'12'
	},
	extra: {
			ring: {
				ringWidth: 15,
				activeOpacity: 0.5,
				activeRadius: 20,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				customRadius: 42,
				borderWidth: 4,
				linearType: 'custom',
				borderColor: "#FFFFFF",
				customColor: ['#2E67D6', '#17B6A7', '#63A61F', '#E0BA1C', '#E18054', '#DB4052']
			}
		}
})
const expendDetail = computed(()=>{
	return {
	"series": [
		{
			"data":props.data
		}
	]
	}
})
</script>
<style lang="scss" scoped>
.charts-box {
	height: 100%;
}
</style>